<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="UTF-8">
    <title>Sentinelle</title>
    <style type="text/css">
    	body {
    		font-family: verdana;
    		font-size: 8pt;
            margin: 0px;
            padding: 0px;
    	}
    	
    	#map_canvas {
            margin: 0px;
            padding: 0px;
    		height: 300px;
    	}
        
        #marker {
            margin: 1em;
        }
    </style>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript">
    var info;
    var map;

    function handleError(positionError) {
  	  alert('Attempt to get location failed: ' + positionError.message);
	}
    
	function locate(position) {
		var pos = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
        var circle = new google.maps.Circle({
            strokeColor: "#FF0000",
            strokeOpacity: 0.7,
            strokeWeight: 1,
            fillColor: "#FF0000",
            fillOpacity: 0.05,
            map: map,
            center: pos,
            radius: 3000 /* meters */
        });
        map.setCenter(pos);
        
		$.ajax( {
            type: "GET",
            url: "https://sentinel-ws.appspot.com/api/alerts?latitude=" + position.coords.latitude + "&longitude=" + position.coords.longitude,
            success: function (data) {
                for(var i=0;i<data.length;i++) {
                    var lat = data[i].latitude;
                    var lon = data[i].longitude;
                    var name= data[i].name;
                    var text= data[i].text;
                    
                    var pos = new google.maps.LatLng(lat,lon);
                    var marker = new google.maps.Marker({
                        position: pos, 
                        map: map, 
                        title: text,
                        clickable: true
                    });
                    
                    google.maps.event.addListener(marker, 'click', function() {
                        info.setContent(this.getTitle());
                        info.open(map, this);
                    });
                    
                }
            }, 
            dataType: "json" } );	        	
    }
      
      $(document).ready(function() {
        
        var isHtml5 = navigator != null && navigator.geolocation != null;
   		
        var geo = navigator.geolocation;
        
        var geocoder = new google.maps.Geocoder();
        
        var alertToAdd = new google.maps.InfoWindow( {
                    content: document.getElementById('add_alert')
                });
      
        var myOptions = {
          zoom: 12,
          center: new google.maps.LatLng(48.833, 2.333), /* Paris */
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        
        info = new google.maps.InfoWindow();
        map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);

        var customMarker = new google.maps.Marker({
              map: map, 
              draggable: true,
              clickable: true,
              visible: false
          });
        
        if(isHtml5) {
            geo.getCurrentPosition(locate, handleError, {maximumAge:0});
        }
        
        $("#add_it").click(function() { 
            map.setZoom(15);
            customMarker.setPosition(map.getCenter());
            customMarker.setVisible(true);
            
            google.maps.event.addListener(customMarker, 'click', function() {
                $("#add_alert").show();
                alertToAdd.open(map, this);
            });
        });
        
        $("#add_alert").hide();
        
        $("#submit").click(function() {
            geocoder.geocode({'latLng': customMarker.getPosition()}, function(results, status) {
                var postAddress = "";
                if (status == google.maps.GeocoderStatus.OK) {
                    if (results[0]) {
                        postAddress = results[0].formatted_address;
                    }
                }
          
                $.ajax( {
                    type: "POST",
                    url: "https://sentinel-ws.appspot.com/api/alert", 
                    data: {
                        latitude: customMarker.getPosition().lat(),
                        longitude: customMarker.getPosition().lng(),
                        postAddress: postAddress,
                        category: $("#category").val(),
                        name: $("#name").val(),
                        text: $("#text").val()
                    }, 
                    success: function(data) {
                        customMarker.setVisible(false);
                        alertToAdd.close();
                        
                        var lat = data.latitude;
                        var lon = data.longitude;
                        var text= data.text;
                        var pos = new google.maps.LatLng(lat,lon);
                        var marker = new google.maps.Marker({
                            position: pos, 
                            map: map, 
                            title: text,
                            clickable: true
                        });
                        
                        google.maps.event.addListener(marker, 'click', function() {
                            info.setContent(this.getTitle());
                            info.open(map, this);
                        });
                    }, 
                    dataType: "json" } );
            });
        });

      });
    </script>
</head>
<body>
<div id="map_canvas"></div>

<div id="marker">
if your location is available, you should see a circle. This circle correspond to the area of events. Every event in this area with an age less than 30 minutes is visible.<br/>
click on this marker --> <img src="http://maps.gstatic.com/mapfiles/markers/marker_sprite.png" id="add_it" /><br/>to add an event on the map.<br/>
this event will be set on the center of the map, drag and move it where you want. Click on this marker to create an event.
</div>
<div id="add_alert">
	<label for="category">add a</label>
	<select id="category" name="category">
		<optgroup label="emergency">
			<option>car accident</option>
			<option>humans fight</option>
			<option>kidnaping</option>
		</optgroup>
		<optgroup label="local business">
			<option>promotion</option>
			<option>free hugs</option>
		</optgroup>
	</select><br/>
	<label for="name">with name</label>
	<input type="text" name="name" id="name"/><br/>
	<label for="text">and text</label>
	<input type="text" name="text" id="text"/><br/>
	<input type="submit" id="submit" />
</div>
</body>
</html>